<template>
	<view class="mainPage">
		<view class="box" :style="{ backgroundColor: barStyle.backColor, color: barStyle.textColor }">
			<view class="cu-bar search">
				<x-city />
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="搜索项目名称" confirm-type="search" />
				</view>
				<view class="cuIcon-message padding-right text-lg header-message"></view>
			</view>
		</view>
		<view class="u-demo-block banner">
			<u-swiper :list="banner" v-if="banner.length > 0" keyName="image" previousMargin="30" nextMargin="30" circular radius="15"
				bgColor="transparent" height="140" @click="clickSwiper"></u-swiper>
		</view>

		<view class="grid col-3 padding-top text-center">
			<view class="item themeColor text-sm">
				<text class="cuIcon-profile"></text>
				<text>持证上岗</text>
			</view>
			<view class="item themeColor text-sm">
				<text class="cuIcon-recharge"></text>
				<text>爽约包赔</text>
			</view>
			<view class="item themeColor text-sm">
				<text class="cuIcon-safe"></text>
				<text>全场保证</text>
			</view>
		</view>
		<view class="title padding-lr-sm padding-bottom-0 padding-top" v-if="RecommendTechnician.length">
			<view class="cuIcon-titles padding-tb-xs themeColor">
				推荐技师
			</view>
			<view class="therapist grid col-4 ">
				<view class="item padding-xs padding-top-0" v-for="(item, index) in RecommendTechnician" :key="index">
					<view class="bg-white padding-sm radius-lg text-center"
						@click="$utils.$page.open('/pages/technician/details?id=' + item.technician_id)">
						<image :src="item.headimg" class="avatar"></image>
						<view class="text-black">
							{{ item.nickname }}
						</view>
						<view class="text-sm text-gray">
							接单{{ item.order_num }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<AppointmentService ref="AppointmentServiceRef" />
		<view class="title padding-sm margin-top-sm">
			<view class="cuIcon-titles padding-tb-xs themeColor">
				服务项目
			</view>
			<view class="list padding-xs padding-top bg-white radius-lg">
				<view class="grid col-4 padding-sm navTab text-center padding-top-0">
					<view :class="search.sort == item.value ? 'themeColor' : 'default'" @click="setNavTab(item)"
						v-for="(item, index) in navTabList" :key="index">
						{{ item.title }}
					</view>
				</view>
				<view class="radius-xl item padding-sm" v-for="(item, index) in projectList" :key="index"
					:class="projectList.length - 1 != index ? 'solid-bottom' : ''">
					<image :src="item.thumb" mode="" class="img"></image>
					<view class="probox">
						<view class="title text-bold text-black">
							<text>{{ item.title }}</text>
							<view class="text-sm text-right cost text-red">
								<text class="text-bold">¥</text>
								<text class="text-lg text-bold">{{ item.price }}</text>
							</view>
						</view>
						<view class="text-gray text-sm">{{ item.tips }}</view>
						<!-- <view class="cu-tag sm margin-bottom-sm">
							{{item.tag}}
						</view> -->
						<view class="price flex flex-wrap">
							<view class="time basis-lg text-sm">
								<text class="cuIcon-timefill text-lg themeColor"></text>
								<text class="padding-left-mn">{{ item.service_duration }}分钟</text>
								<text class="cuIcon-tagfill text-lg padding-left-xs themeColor"></text>
								<text class="padding-left-mn">{{ item.sales_num }}人选择</text>
							</view>
							<view class="basis-sm text-right liji"
								@click="$utils.$page.open('/pages/project/details?id=' + item.id)">
								<button class="cu-btn sm round">立即选择</button>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loading" @loadmore="getList" />
			</view>
		</view>

		<loading v-if="pageLoading" />
		<x-tabbar page="/pages/index/index" />
	</view>
</template>

<script>
import { debounce } from '@/utils/functions';
let debounceGetList;
import AppointmentService from './modules/AppointmentService';
export default {
	components: { AppointmentService },
	data() {
		return {
			pageLoading: false,
			loading: 'loadmore',
			barStyle: {
				backColor: '',
				textColor: '#ffffff'
			},
			banner: [],
			RecommendTechnician: [],
			navTabList: [
				{
					title: '推荐',
					value: 'recommend'
				},
				{
					title: '销量',
					value: 'sale'
				},
				{
					title: '价格',
					value: 'price'
				},
				{
					title: '好评',
					value: 'comment'
				}
			],
			search: {
				page: 1,
				limit: 10,
				keywords: '',
				sort: 'recommend',
				order: 'desc'
			},
			projectList: []
		}
	},
	onLoad() {
		this.pageLoading = true;
		this.getList();
		this.$utils.$api.Ads.ads('banner').then((res) => {
			this.banner = res;
		}).catch((err) => {
		})
		debounceGetList = debounce(() => { this.getList() }, 300);
	},
	onShow() {
		uni.hideTabBar();
		this.getRecommendTechnician();
		const AppointmentServiceRef = this.$refs.AppointmentServiceRef;
		AppointmentServiceRef && AppointmentServiceRef.getList();
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		clickSwiper(index){
			this.$utils.$page.ads(this.banner[index]);
		},
		setNavTab(item) {
			this.pageLoading = true;
			if(this.search.sort==item.value){
				this.search.order=this.search.order=='asc'? 'desc':'asc';
			}else{
				this.search.sort = item.value;
				this.search.order='desc';
			}
			this.search.page = 1;
			this.projectList = [];
			this.loading = 'loadmore';
			debounceGetList();
		},
		getRecommendTechnician() {
			this.$utils.$api.Technician.list({
				limit: 8,
				recommend: 1
			}).then(data => {
				this.RecommendTechnician = data;
			});
		},
		getList() {
			if (this.loading === 'loading' || this.loading === 'nomore') return;
			this.loading = 'loading';
			this.$utils.$api.Service.list(this.search).then(data => {
				this.loading = 'loadmore';
				this.projectList = [...this.projectList, ...data.data];
				this.search.page++;
				if (data.current_page >= data.last_page) {
					this.loading = 'nomore';
				}
			}).finally(() => {
				this.pageLoading = false;
			});
		},
		change() { }
	},
	onPageScroll(event) {
		let scrollTop = event.scrollTop
		let color = Math.round(Math.round(scrollTop) / 100) * 255;
		let alpha = Math.round(scrollTop) / 100;

		color = color >= 255 ? 255 : color
		alpha = alpha >= 1 ? 1 : alpha

		this.barStyle.textColor = `rgb(${255 - color},${255 - color},${255 - color})`;
		this.barStyle.backColor = `rgba(255,255,255,${alpha})`;
	}
}
</script>
<style lang="less" scoped>
.box {
	position: fixed;
	width: 100%;
	z-index: 99;

	.header-message {
		font-size: 40rpx;
	}
}

.banner {
	padding-top: 100rpx;
}

.navTab {
	border-radius: 50px;
}

.therapist {
	.item {
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
}

.list {
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		height: 180rpx;

		// background-color: #fea1a5;
		.img {
			width: 170rpx;
			height: 130rpx;
			border-radius: 10upx;
		}

		.probox {
			width: 70%;
			height: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: baseline;

				.cost {
					width: 125upx;
				}
			}

			.price {
				align-items: center;
			}
		}
	}
}

.liji {
	button {
		background: var(--theme-bg-color);
		color: white;
	}
}
</style>
